<template>
	<gui-page  :customHeader="true" headerStyle='background-color:#e15324;' statusBarStyle='background-color:#e15324;'>
		<view slot="gHeader">
			<view class="gui-flex gui-space-between gui-align-items-center" style="padding: 0 0 0 30rpx;">
				<text @tap='sao' class="gui-grids-icon gui-icons" style="color: #FFFFFF;width: 60rpx;font-size: 50rpx;">&#xe631;</text>
				<view class="search-warp gui-border-box " style="width: 660rpx;">
					<gui-search :kwd='key' @clear='clear' background="#f7f7f7" @confirm="confirm" :clearBtn="true"></gui-search>
				</view>
				<gui-mp-menu-spacing></gui-mp-menu-spacing>
			</view>
		</view>
		<view slot="gBody" style='background-color: #f9f9f9;'>
			<view style='width: 100%;height: 300rpx;background-color: #e15324;border-radius:0 0 105rpx 105rpx;'></view>
			
			<view class="top" style="margin: -280rpx 0 20rpx 0;">
				<gui-swiper :swiperItems="swiperItems" :width="750" :height="330" :spacing="25" :opacity="0.9"></gui-swiper>
			</view>
			<view class="gui-margin-top gui-bg-gray gui-padding" style="background-color: #ffffff !important;">
						<gui-speaker 
						:items="speakerMsgs" 
						:vertical="true" 
						:current="0" 
						styles="overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx; color:#ED6A0C;">
							<text slot="icon" class="gui-block-text gui-icons demo-icon gui-color-orange" style="width:100rpx;">&#xe62b;</text>
						</gui-speaker>
					</view>
			
			<view class="icon gui-flex gui-space-between gui-wrap">
				<view v-for="(item,index) in cate" :key='item.id' class="w gui-flex gui-columns gui-align-items-center">
					<image :src="item.pic ? imgServer+item.pic : '../../static/logo.png'" mode="widthFix" @tap="tiao(item.name)"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="today">
				<view class="to-title ">
					<text class="to-title1">今日必买</text>|
					<text class="to-title2">优惠好货大爆料</text>
				</view>
				<view class="shang gui-padding" v-if="huodong.length>0">
					<view  class="tejia gui-padding" @tap="tuigoods(huodong[0].goods_id)">
						<view class="tejia1 ">
							<text class="shang-day">{{huodong[0].title}}</text>
							<text class="te-hot">HOT</text>
						</view>
						<view class="">
							<text class="te-pai">各大品牌只要</text>
							<text class="te-one">{{huodong[0].desc}}</text>
						</view>
						<view class="teijia-img">
							<image :src="imgServer+huodong[0].img" mode="widthFix"></image>
						</view>
					</view>
					<view class="to-right" >
						<view class="haoliao gui-padding" @tap="tuigoods(huodong[1].goods_id)">
							<view class="hao-left">
									<view class="hao-liao">
										<text>{{huodong[1].title}}</text>
									</view>
									<view class="top">
										<text class="hao-huo">新到好货</text>
										<text class="hao-zhe">{{huodong[1].desc}}</text>
										<text class="hao-qi">起</text>
									</view>
								<view>
									<text class="hao-jia">性价比高</text>
								</view>
							</view>
							<view class="hao-img">
								<image :src="imgServer+huodong[1].img" mode="widthFix"></image>
							</view>
						</view>
						<view class="baoyou gui-padding" @tap="tuigoods(huodong[2].goods_id)">
							<view class="hao-left">
								<view class="you">
									<text>{{huodong[2].title}}</text>
								</view>
								<view class="you-far top">
									<text>偏于地区{{huodong[2].desc}}</text>
								</view>
								<view>
									<text class="you-buy">买就包邮</text>
								</view>
							</view>
							<view class="hao-img">
								<image :src="imgServer+huodong[2].img" mode="widthFix"></image>
							</view>
						</view>
					</view>	
				</view>
			</view>
			<view class="gui-margin-top">
				<view class="gui-flex tui">
					<text class="gui-icons">&#xe64c;</text> 限时精选
				</view>
				
				<view class="tui">
					
					<scroll-view class="sv"  scroll-x="true"  scroll-left="0">
							<view v-for="(item,index) in tui" :key='item.id' @tap='tuigoods(item.id)' class="gui-card-item" hover-class="gui-tap">
								<view class="gui-card-img gui-relative gui-img-in">
										<text v-if="item.lei==4" class="gui-badge gui-bg-red gui-badge-absolute gui-color-white">社区团购</text>
										<text v-if="0" class="gui-badge gui-bg-red gui-badge-absolute gui-color-white"></text>
									<gui-image :width="230" 
									:src="obs+item.goods_img"></gui-image>
								</view>
								<text class="gui-card-title gui-block-text gui-text gui-primary-color">{{item.goods_name}}</text>
								<view class="gui-flex gui-rows gui-space-between gui-nowrap">
									<text class="gui-block-text liz-t">￥{{item.money}}</text>
								</view>
							</view>
					</scroll-view>
				</view>
			</view>
			<view class="gui-margin-top">
				<view class="gui-flex tui">
					<text class="gui-icons">&#xe61f;</text> 商品推荐
				</view>
				<gui-product-list1 :products="products"  lujing='/pages/index/shop_detail'></gui-product-list1>
			</view>
		</view>
	</gui-page>
</template>

<script>
let common = require('@/common.js');
import autoUpdater from '@/components/autoUpdater.min.js';
export default {
	data() {
		return {
			products : [],
			swiperItems:[],
			key:'',
			page:1,
			tui:[],
			cate:[],
			imgServer:'',
			obs:'',
			speakerMsgs : [],
			huodong:[]
		};
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
		const user_no = uni.getStorageSync('user_no');
	    return {
	      title: '商城欢迎您！',
	      path: '/pages/index/index?yaoqing=' + user_no
	    }
	  },
	onLoad(e) {
		if (e.yaoqing) {
			uni.setStorageSync('yaoqing', e.yaoqing);
		}
		this.imgServer=uni.common.imgServer
		this.obs=uni.common.obs
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_index_swiper',
				lan:'index',
			},
			false,
			res => {
				if (res.code == 1) {
					for (let i in res.data) {
						this.swiperItems.push({
							img: common.imgServer+res.data[i].img,
							url: '/pages/index/src?src='+ res.data[i].url,
							title: res.data[i].title,
							opentype: 'navigate'
						})
					}
					for (let i in res.msg) {
						this.speakerMsgs.push({ 
							url: '/pages/index/web?src=tongzhi_'+ res.msg[i].id,
							title: res.msg[i].title,
							opentype: 'navigate'
							})
					}
					this.huodong=res.huodong
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取失败'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'get_index_cate',
				lan:'index',
			},
			false,
			res => {
				if (res.code == 1) {
					this.cate=res.cate
					this.tui=res.tui
				} else {
					uni.showToast({
						icon: 'none',
						title: '获取失败'
					});
				}
			},
			e => {
				console.log(e);
			}
		);
	},
	onShow() {
		//升级
		uni.common.post(
			uni.common.apiServer + 'index',
			{
				type: 'update_app',
				lan:'index',
			},
			false,
			res => {
				if (res.code == 1) {
					//#ifdef APP
					if (res.app_v > plus.runtime.versionCode) {
						
						autoUpdater.init({
							packageUrl: res.url,
							content: res.desc,
							contentAlign: 'left',
							cancel: '取消该版本',
							cancelColor: '#007fff'
						});
						autoUpdater.show();
						
					}
					//#endif
				}
			},
			e => {
				console.log(e);
			}
		);
		this.page=1
		this.get_data()
		
	},
	onReachBottom(){
		this.get_data()
	},
	methods: {
		sao(){
			uni.scanCode({
				success: function (res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					uni.common.msg('无法识别扫描内容')
				},
				fail(e) {
					uni.common.msg('扫描数据非法')
				}
			});
		},
		tiao(e){
			uni.reLaunch({
				url:'xiaofei?type='+e
			})
		},
		tuigoods(e){
			if(e){
				uni.navigateTo({
					url:'/pages/index/shop_detail?id='+e
				})
			}
		},
		clear(e){
s
		},
		confirm(e){
			uni.reLaunch({
				url:'xiaofei?key='+e
			})
		},
		get_data() {
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_index_goods',
					lan:'index',
					//key:this.key,
					page:this.page
				},
				false,
				res => {
					if (res.code == 1) {
						let list=[]
						for (let v of res.data) {
							list.push({
								'id':v.id,
								'name':v.goods_name,
								'img':common.obs+v.goods_img,
								'priceMarket':v.sales_num,
								'price':v.money,
								'lei':v.lei
							})
						}
						if(this.page==1){
							this.products=list
						}else{
							this.products = this.products.concat(list);
						}
						this.page++
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		}
	}
};
</script>

<style>
.search-warp{width:750rpx; padding:15rpx 30rpx;}
.title{
	border-left: 6rpx solid #E1503D;
	margin: 30rpx 30rpx;
	padding: 0 20rpx;
	font-size: 34rpx;
}
.tui{
	background-color: #ffffff;
	margin: 15rpx;
	padding: 15rpx;
	border-radius: 15rpx;
	font-size: 38rpx;
	line-height: 2;
	font-weight: 600;
}
.tui text{
	margin-right: 15rpx;
	font-weight: 400;
}
.sv{
	white-space: nowrap;
}
.gui-card-img{
	width: 230rpx;
}
.gui-card-item{
	display: inline-block;
	margin: 15rpx;
	width: 230rpx;
}
.icon {
	margin-top: 0rpx;
	background-color: #FFFFFF;
	font-size: 12px;
}

.icon image {
	width: 120rpx;
	display: inline-flex;
	border-radius: 30px;
	
}
.icon text{
	margin-top: 20rpx;
	font-size: 25rpx;
}
.w{
	width: 20%;
	padding: 25rpx 0;
	box-sizing: border-box;
}
.gui-card-title{
	height: 60rpx;
	overflow: hidden;
}
.liz-z{
	margin: 10rpx;
	border-radius: 30rpx;
	text-align: center;
	background-color: #e15324 !important;
}
.liz-z text{
	margin: 0;
	text-align: center;
}
.liz-t{
	color: #E1503D;
	font-size: 31rpx;
	line-height: 70rpx;
}
.today{
	margin-top: 30rpx;
	padding-top: 30rpx;
	background-color: #FFFFFF;
	font-size: 31rpx;
	padding-bottom: 30rpx;
}
.to-title{
	padding-bottom: 30rpx;
}
.to-title1{
	color: #bd4eeb;
	font-size: 42rpx;
	font-weight: 600;
	padding-left: 30rpx;
	padding-right: 20rpx;
}
.to-title2{
	font-size: 31rpx;
	padding-left: 15rpx;
}
.shang{
	display: flex;
	justify-content: space-between;
}
.tejia{
	width: 260rpx;
	background-color: #fff4f8;
	height: 440rpx;
}
.tejia image{
	width: 190rpx;
	
}
.tejia1{
	padding: 30rpx 0;
}
.shang-day{
	color: #f6272d;
	font-weight: 600;
	font-size: 30rpx;
}
.te-hot{
	background-color: #fa2f29;
	color: #fff;
	border-radius: 30rpx;
	padding: 0 20rpx;
	margin-left: 20rpx;
	font-size: 26rpx;
}
.te-pai{
	font-size: 26rpx;
	color: #6d6767;
}
.te-one{
	font-size: 34rpx;
	color: #eda11a;
	font-weight: 600;
	margin-left: 5rpx;
}
.teijia-img{
	text-align: right;
	margin-top: 30rpx;
}
.to-right{
	width: 420rpx;
}
.to-right image{
	width: 120rpx;
	display: flex;
	align-items: flex-end;
}
.hao-img{
	display: flex;
	align-items: flex-end;
}
.haoliao{
	display: flex;
	justify-content: space-between;
	background-color: #f7fcff;
	height: 220rpx;
}
.hao-liao{
	padding: 30rpx 0 10rpx 0;
	font-weight: 600;
	font-size: 30rpx;
}
.hao-huo{
	font-size: 26rpx;
	color: #9d9ea2;
}
.top{
	margin-bottom: 50rpx;
}
.hao-zhe{
	font-size: 26rpx;
	color: #fff;
	background-color: #fc2e32;
	border-radius: 50%;
	padding: 10rpx;
	margin: 0 10rpx 0 20rpx;
}
.hao-qi{
	font-size: 26rpx;
	color: #df585e;
}
.hao-jia{
	background-color: #6ac5da;
	color: #fff;
	font-size: 26rpx;
	padding: 5rpx 20rpx;
	border-radius: 10rpx;
}
.baoyou{
	display: flex;
	justify-content: space-between;
	background-color: #f8fdf7;
	height: 220rpx;
}
.you{
	padding: 30rpx 0 10rpx 0;
	font-weight: 600;
	font-size: 30rpx;
}
.you-far{
	color: #62635e;
	font-size: 26rpx;
}
.you-buy{
	background-color: #94d474;
	color: #fff;
	font-size: 26rpx;
	padding: 5rpx 20rpx;
	border-radius: 10rpx;
}

</style>



